/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/05/18
 *@description  menu  component  菜单组件
 */
/**
 * #item
 *
 * @type        aty-menu
 * @cn            菜单
 * @menu        导航
 * @order   10
 * @stPlugin    true
 * @stContainer false
 * @children    [aty-menu-item,aty-submenu,aty-menu-group]
 */
import config from '../../../config/config.js'

// mixins
import Emitter from '../../../mixins/emitter.js'
// prefix
const prefixCls = config.prefix + '-menu'
// module
export default {
  name: prefixCls,
  mixins: [Emitter],
  props: {
    /**
     * #property
     *
     * @name     mode
     * @cn       菜单类型
     * @type     list
     * @options  [horizontal, vertical]
     * @value     vertical
     * @description 菜单类型，取值为 [horizontal（水平）, vertical（垂直）]中的其中一个
     */
    mode: {
      validator (value) {
        return Artery.isOneOf(value, ['horizontal', 'vertical'])
      },
      default: 'vertical'
    },
    /**
     * #property
     *
     * @name      theme
     * @cn        菜单主题
     * @type      list
     * @options   [light, dark,primary]
     * @value     light
     * @description 菜单主题，取值为 [light, dark,primary]中的其中一个,其中 primary 只适用于 mode="horizontal"
     */
    theme: {
      validator (value) {
        return Artery.isOneOf(value, ['light', 'dark', 'primary'])
      },
      default: 'light'
    },
    /**
     * #property
     *
     * @name     activeCode
     * @cn       激活菜单的条目的code值
     * @type     string,number
     * @description 当前激活菜单的条目的code值
     */
    activeCode: {
      type: [String, Number]
    },
    /**
     * #property
     *
     * @name    triggerClick
     * @cn      是否自动触发点击
     * @type    boolean
     * @value   false
     * @description 渲染activeCode的menu-item时，是否自动触发点击
     */
    triggerClick: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name   openCodes
     * @cn     展开的Submenu的code值集合
     * @type   array
     * @bind   must
     * @description  所有展开的Submenu的code值集合
     */
    openCodes: {
      type: Array,
      default () {
        return []
      }
    },
    /**
     * #property
     *
     * @name    accordion
     * @cn      是否开启手风琴模式
     * @type    boolean
     * @value   false
     * @description 是否开启手风琴模式，开启后每次至多展开一个子菜单
     */
    accordion: {
      type: Boolean,
      default: false
    },

    /**
     * #property
     *
     * @name     width
     * @cn      导航菜单的宽度
     * @type    string
     * @value   240px
     * @description    导航菜单的宽度，只在 mode="vertical" 时有效，如果使用 aty-col 等布局，建议设置为 auto
     */
    width: {
      type: String,
      default: '240px'
    },

    /**
     * #property
     *
     * @name    showSubMenu
     * @cn      菜单激活时，如果为子菜单，是否展开主菜单显示子菜单
     * @type    boolean
     * @bind    must
     * @value   true
     * @description 当改变activeCode时，如果activeCode值为子菜单，是否展开显示子菜单（openCodes属性只在初始化组件时有效）
     */
    showSubMenu: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      currentActiveCode: this.activeCode,
      isClick: false // 用于区分菜单激活的两种方式：点击 和 动态修改activeCode
    }
  },

  watch: {
    openCodes () {
      /**
       * #event
       *
       * @name    open-change
       * @param   openCodes   当前展开的 Submenu 的 name 值数组
       * @body    console.log("open-change");
       * @description    当 展开/收起 子菜单时触发
       */
      this.$emit('open-change', this.openCodes)
    },
    activeCode (val) {
      this.isClick = false
      this.currentActiveCode = val
    },
    // 当前激活的item的code
    currentActiveCode () {
      this.updateActiveItem()
    }
  },
  computed: {
    classes () {
      let theme = this.theme
      if (this.mode === 'vertical' && this.theme === 'primary') {
        theme = 'light'
      }
      return [
                `${prefixCls}`,
                `${prefixCls}-${theme}`,
                {
                  [`${prefixCls}-${this.mode}`]: this.mode
                }
      ]
    },
    styles () {
      const style = {}
      if (this.mode === 'vertical') {
        style.width = this.width
      }
      return style
    }
  },
  methods: {
    //  更新激活条目
    updateActiveItem () {
      if (this.currentActiveCode === undefined) {
        this.currentActiveCode = -1
      }
      // event broadcast   aty-submenu   and  aty-menu-item
      this.broadcast(config.prefix + '-submenu', 'update-active-code')
      /*
       * [2019年6月27日 19:02:42 By Vinsea]
       * 改变 activeCode 时，动态展开显示子菜单
       * 菜单激活有两种来源，一种是点击切换，一种是动态改变 activeCode，用 isClick 区分
       */
      this.broadcast(config.prefix + '-menu-item', 'update-active-code', {
        code: this.currentActiveCode,
        isShowSubMenu: this.showSubMenu,
        isClick: this.isClick
      })
    },
    updateOpenKeys (code) {
      if (!code) {
        return
      }
      const index = this.openCodes.indexOf(code)
      if (index > -1) {
        this.openCodes.splice(index, 1)
      } else {
        this.openCodes.push(code)
        if (this.accordion) {
          let currentSubmenu = {}
          Artery.findComponentsDownward(this, config.prefix + '-submenu').forEach(item => {
            if (item.code === code) {
              currentSubmenu = item
            }
          })
          Artery.findBrothersComponents(currentSubmenu, config.prefix + '-submenu').forEach(item => {
            const index = this.openCodes.indexOf(item.code)
            this.openCodes.splice(index, index >= 0 ? 1 : 0)
          })
          this.openCodes.push(code)
        }
      }
    },
    // 判断是否展开子菜单
    updateOpened () {
      const items = Artery.findComponentsDownward(this, config.prefix + '-submenu')
      if (items.length) {
        items.forEach(item => {
          if (this.openCodes.indexOf(item.code) > -1) {
            item.opened = true
          }
        })
      }
    }
  },
  mounted () {
    this.updateActiveItem()
    this.updateOpened()
    // 绑定选中事件
    this.$on('menu-item-select', (menuItem) => {
      const oldCode = this.currentActiveCode
      this.currentActiveCode = menuItem.code
      this.isClick = menuItem.isClick
      /*
       * [2019年6月27日 17:58:50 by Vinsea]
       * 如果通过“点击”切换的菜单，就不执行，防止重复触发@select
       * 保持原来逻辑：通过 updateActiveItem 触发 @select
       */
      if (menuItem.isClick && this.currentActiveCode !== oldCode) {
        return
      }

      /**
       * #event
       *
       * @name    select
       * @param   code   当前激活的code值
       * @param   text   当前激活菜单的text
       * @body    console.log(code+"被激活");
       * @description    选中子菜单时触发
       */
      this.$emit('select', menuItem.code, menuItem.text)
    })
  }
}
